import React, { Component, lazy, Suspense } from 'react'
import {Route, NavLink, Switch, Redirect} from 'react-router-dom'
// import About from '../../components/LazyLoadDemo/About'
// import Home from '../../components/LazyLoadDemo/Home'

// 懒加载
const Home = lazy(() => import('../../components/LazyLoadDemo/Home'))
const About = lazy(() => import('../../components/LazyLoadDemo/About'))

export default class LazyLoadDemo extends Component {
  render() {
    return (
      <div>
        <div>
          <div className="row">
            <div className="col-xs-2 col-xs-offset-2">
              <div className="list-group">
                  <NavLink className="list-group-item active"  to="/home">Home</NavLink><br />
                  <NavLink className="list-group-item active" to="/about">About</NavLink>
              </div>
            </div>
            <div className="col-xs-6">
              <div className="panel">
                <div className="panel-body">
                  {/* 注册路由 */}
                  <Suspense fallback={<h1>loading</h1>}>
                    <Switch>
                      <Route path="/home" component={Home}/>
                      <Route path="/about" component={About}/>
                      <Redirect to="/home"/>
                    </Switch>
                  </Suspense>

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}
